<div id="upload-contain" title="Upload..." style="display: none;">
<iframe id="uploadHandler" width="100%" height="100%"
	style="width: 100%; height: 100%; border: thin;" ></iframe>
</div>
<div id="upload-contain1" title="Upload File" style="display: none;">

<hr/>
<form method="post" action="/base/files/uploadMulti" enctype="multipart/form-data">
  
  <!-- File input -->     
  <input name="files" type="file" /><br/>
  <input name="files" type="file" /><br/>
  <input name="files" type="file" /><br/>
  <input name="files" type="file" /><br/>
  <input name="files" type="file" /><br/>
  <button onclick="document.forms[0].submit();">UPLOAD</button>
</form>
<hr/>
<i>Uploading File With Ajax</i><br/>

<!--  Form 2 -->
<form id="form2" method="post" action="base/files/uploadMulti" enctype="multipart/form-data">
  <!-- File input -->     
  <input name="file2" id="file2" type="file" /><br/>
</form>

<button value="Submit" onclick="uploadJqueryForm()" >Upload</button><i>Using JQuery Form Plugin</i><br/>
<button value="Submit" onclick="uploadFormData()" >Upload</button><i>Using FormData Object</i>

<div id="result"></div>

</div>

  <script src="http://malsup.github.com/jquery.form.js"></script>
  <script type="text/javascript">
<!--

//using jquery.form.js
function uploadJqueryForm(){
  $('#result').html('');

 $("#form2").ajaxForm({
	success:function(data) { 
	      //$('#result').text(data+" uploaded by Jquery Form plugin!");
	      $('#result').html(data);

	 },
	 dataType:"text"
 }).submit();
}
//---------------------------------------------------------
//using FormData() object
function uploadFormData(){
  $('#result').html('');

var oMyForm = new FormData();
oMyForm.append("file", file2.files[0]);

$.ajax({
  url: 'http://localhost:8080/base/files/uploadMulti',
  data: oMyForm,
  dataType: 'text',
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
  //  $('#result').html(data+ " uploaded by FormData!");
    $('#result').html(data);

  }
});
}
//-->
</script>
  
<script type="text/javascript">
$(function() {
	var dialog = $( "#upload-contain" ).dialog({
	      autoOpen: false,
	      height: 400,
	      width: 500,
	      modal: true,
	      position: { my: "center center", at: "center top", of: window },
// 	      buttons: {
// 	        "Upload":  function() {
// 	          dialog.dialog( "close" );
// 	        },
// 	        Cancel: function() {
// 	          dialog.dialog( "close" );
// 	        }
// 	      },
	      close: function() {
	    	  location.reload();
// 	    	  $("#uploadHandler").remove();
// 	        form[ 0 ].reset();
// 	        allFields.removeClass( "ui-state-error" );
	      }
	    });
	
	$( "#popupUploadPanel" ).button().on( "click", function() {
		
		$("#uploadHandler").attr('src','upload');
	      dialog.dialog( "open" );
	    });
});
</script>